<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <div class="header" style="display: flex;flex-direction: column">
      <img style="width: 200px" src="http://www.ynpetgc.cn/static/img/logo-top.797dcaac.png">
      <div style="flex: 1"></div>
      <!--      <nut-tabs style="font-size: 32px" v-model="selectIndex" color="green" background="transparent" type="smile">-->
      <!--        <nut-tabpane style="height: 0px;display: none" title="团队榜">-->
      <!--        </nut-tabpane>-->
      <!--        <nut-tabpane style="height: 0px;display: none" title="个人榜">-->
      <!--        </nut-tabpane>-->

      <!--      </nut-tabs>-->
      <div style="display: flex;flex-direction: row;padding: 4px 16px">
        <div @click="selectIndex=1"
             :style="{'background':selectIndex==1?'#38ad42':''}"
             style="flex: 1;color: white;font-size: 16px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 8px 0px">
          <div>
            团队榜
          </div>
          <div v-if="selectIndex==1" style="background: white;height: 4px;width: 40%;margin-top: 8px"></div>
        </div>
        <div @click="selectIndex=2"
             :style="{'background':selectIndex==2?'#38ad42':''}"
             style="flex: 1;color: white;font-size: 16px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 8px 0px">
          <div>
            个人榜
          </div>
          <div v-if="selectIndex==2" style="background: white;height: 4px;width: 40%;margin-top: 8px"></div>
        </div>
      </div>
    </div>
    <div v-if="selectIndex==1" style="flex: 1;overflow-y: scroll">
      <div style="height: 44px;background: #efefef;padding: 8px;display: flex;align-items: center;box-sizing: border-box;font-size: 14px;color: #2b2f3a">
        <div style="width: 64px;display: flex;align-items: center;justify-content: center">
          名次
        </div>
        <div style="flex: 2;">
          学校
        </div>
        <div style="width: 64px">
          成绩
        </div>
      </div>
      <div style="padding: 8px">
        <div style="background: white;height: 44px;border-bottom: 0.1px #cecece solid;display: flex;align-items: center"
             v-for="(item,index) in shoolScoreList">
          <div style="width: 64px;display: flex;align-items: center;justify-content: center">
            {{ item.mc }}
          </div>
          <div style="flex: 2;">
            {{ item.name }}
          </div>
          <div style="width: 64px">
            {{ item.score }}
          </div>
        </div>
      </div>
    </div>

    <div v-if="selectIndex==2" style="flex: 1;overflow-y: scroll">
      <div style="height: 44px;background: #efefef;padding: 8px;display: flex;align-items: center;box-sizing: border-box;font-size: 14px;color: #2b2f3a">
        <div style="width: 64px;display: flex;align-items: center;justify-content: center">
          名次
        </div>
        <div style="flex: 2;">
          姓名
        </div>
        <div style="width: 64px">
          成绩
        </div>
      </div>
      <div style="padding: 8px">
        <div style="background: white;height: 44px;border-bottom: 0.1px #cecece solid;display: flex;align-items: center"
             v-for="(item,index) in studentScoreList">
          <div style="width: 64px;display: flex;align-items: center;justify-content: center">
            {{ item.mc }}
          </div>
          <div style="flex: 2;">
            {{ item.name }}
          </div>
          <div style="width: 64px">
            {{ item.score }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getSchoolScoreList, getStudentScoreList} from "@/api/business/score.js";

export default {
  name: "index",
  data() {
    return {
      selectIndex: 1,
      shoolScoreList: [],
      studentScoreList: [],
      raceId:null,
    }
  },
  mounted() {
    this.raceId = this.$route.query.raceId; // John
    this.getSchoolScoreList();
    this.getStudentScoreList();
  },
  methods: {
    getSchoolScoreList() {
      let that = this;
      getSchoolScoreList(this.raceId).then(res => {
        that.shoolScoreList = res.data;
      })
    },
    getStudentScoreList() {
      let that = this;
      getStudentScoreList(this.raceId).then(res => {
        that.studentScoreList = res.data;
      })
    }
  }
}
</script>

<style scoped>
.header {

  height: 200px;
  background: url("http://www.ynpetgc.cn/static/img/index-swiper.8a43b68f.jpg");
  background-repeat: no-repeat;
  background-size: 100% 200px;
}
</style>